import { FFormCustom } from '@vh-mobile/pro-components';
import type { ColumnsType } from '@vh-mobile/pro-components/lib/f-form-custom/types';
import MainContainerCustom from '@/components/MainContainerCustom';
import { Text, View } from '@tarojs/components';
import dayjs, { Dayjs } from 'dayjs';
import './index.less';

/**
 * 获取上门时间段的选择数据
 * @param data 当前时间
 */
export const getTimeSlot = (date?: any) => {
  let startDate: Dayjs = dayjs();
  if (date) {
    startDate = dayjs(date);
  }
  const len = 14;
  const hourLen = 6;
  const treeData: any = [];
  for (let index = 0; index < len; index++) {
    const newData = startDate.add(index, 'day');
    const startNewData = newData.hour(9).minute(0).second(0);
    const children: any = [];
    let text = newData.format('MM月-DD日');

    const isToday = newData.isSame(dayjs(), 'day');
    const nextToday = newData.isSame(dayjs().add(1, 'day'), 'day');
    const next1Today = newData.isSame(dayjs().add(2, 'day'), 'day');

    if (isToday) {
      text = `${text}（今天）`;
    } else if (nextToday) {
      text = `${text}（明天）`;
    } else if (next1Today) {
      text = `${text}（后天）`;
    } else {
      text = `${text}（${newData.format('dddd').replace('星期', '周')}）`;
    }

    for (let i = 0; i < hourLen; i++) {
      const start = startNewData.add(i * 2, 'hour');
      const end = startNewData.add(i * 2 + 2, 'hour');
      let disabled = false;
      if (start.valueOf() < dayjs().valueOf()) {
        disabled = true;
      }
      children.push({
        value: `${start.format('YYYY-MM-DD HH:mm:ss')}#${end.format('YYYY-MM-DD HH:mm:ss')}`,
        text: `${start.format('HH:mm')}-${end.format('HH:mm')}`,
        disabled: disabled,
      });
    }
    treeData.push({
      value: newData.format('YYYYMMDD'),
      text: text,
      children: children,
    });
  }
  return treeData;
};

const columns: ColumnsType[] = [
  {
    title: '排名依据',
    dataIndex: 'checkbox1',
    valueType: 'FCheckboxCustom',
    fieldProps: {
      options: [
        { value: 1, label: '选项一', title: '我是信息' },
        { value: 2, label: '选项选项一' },
        { value: 3, label: '选项三' },
        { value: 4, label: '选项四' },
        { value: 5, label: '选项五选项一' },
        { value: 6, label: '选项六' },
        { value: 7, label: '选项七' },
      ],
      valueRender: (item: any) => {
        // console.log('===================');
        // console.log(item);
        // console.log('===================');
        return (
          <>
            {item.label}
            {item.title ? <>({item.title})</> : ''}
          </>
        );
      },
      multiple: true,
      checkboxAll: true,
    },
    cellProps: {
      position: 'bottom',
    },
  },
  {
    title: '日历日期选择',
    dataIndex: 'calendar',
    valueType: 'FCalendarCustom',
    fieldProps: {
      type: 'range',
    },
  },
  {
    title: '城市选择',
    dataIndex: 'cascader',
    valueType: 'FCascaderCustom',
    fieldProps: {
      options: [
        {
          value: '1',
          text: '浙江',
          children: [
            {
              value: '11',
              text: '杭州',
              children: [
                { value: '111', text: '西湖区' },
                { value: '112', text: '余杭区' },
              ],
            },
            {
              value: '12',
              text: '温州',
              children: [
                { value: '121', text: '鹿城区' },
                { value: '122', text: '瓯海区' },
              ],
            },
          ],
        },
        {
          value: '2',
          text: '湖南',
          children: [
            {
              value: '21',
              text: '长沙',
              children: [
                { value: '211', text: '西湖区' },
                { value: '212', text: '余杭区' },
              ],
            },
            {
              value: '22',
              text: '温州',
              children: [
                { value: '221', text: '鹿城区' },
                { value: '222', text: '瓯海区' },
              ],
            },
          ],
        },
        {
          value: '3',
          text: '福建',
          children: [
            {
              value: '31',
              text: '福州',
              children: [
                { value: '311', text: '鼓楼区' },
                { value: '312', text: '台江区' },
              ],
            },
          ],
        },
      ],
      title: '选择区域',
    },
  },
  {
    title: '上门服务地址(落到门牌号)',
    dataIndex: 'addressId',
    valueType: 'FOpenPageCustom',
    fieldProps: {
      url: '/pages/allEditPage/personnelList/index',
      fieldProps: {
        clearable: false,
      },
      inputRender: (dataSourceName: any) => {
        if (!dataSourceName) {
          return <View className="placeholder">点击这里选择上门服务地址</View>;
        }
        return <View className="">{dataSourceName}</View>;
      },
    },
    cellProps: {
      rules: [{ required: true, message: '请选择上门服务地址' }],
      direction: 'vertical',
    },
  },
  {
    title: '上门服务时段(后期可调整)',
    valueType: 'FCascaderCustom',
    dataIndex: 'times',
    fieldProps: {
      options: getTimeSlot(),
      fieldProps: {
        clearable: false,
        placeholder: '点击这里选择上门服务时段',
      },
    },
    cellProps: {
      rules: [{ required: true, message: '请选择上门服务时段' }],
      direction: 'vertical',
    },
  },
  {
    title: '预估重量',
    valueType: 'FSelectCustom',
    dataIndex: 'estWeight',
    fieldProps: {
      options: [
        {
          label: '1kg',
          value: 1,
        },
        {
          label: '2kg',
          value: 2,
        },
      ],
      fieldProps: {
        placeholder: '点击这里选择预估重量',
      },
    },
    cellProps: {
      rules: [{ required: true, message: '请选择预估重量' }],
      direction: 'vertical',
    },
  },
];

export default function DemoForm() {
  const onSubmit = (values: any) => {
    console.log(values);
  };
  const onValueChange = (values: any) => {
    console.log(values);
  };
  const columnBefor = (column: any, ivalues: any) => {
    console.log(column, ivalues);
    return column;
  };
  const submitValuesBefor = (fromData: any) => {
    return fromData;
  };
  const submitOnDone = (params: any) => {
    console.log(params);
  };
  const submitRequest = async (values: any) => {
    console.log(values);
    return {
      data: {},
      code: 0,
      message: '成功',
    };
  };

  return (
    <MainContainerCustom>
      <FFormCustom
        className="form1"
        columns={columns}
        onSubmit={onSubmit}
        initialValues={{
          // calendar: '2025-03-19',
          calendar: ['2025-03-19', '2025-03-20'],
          cascader: ['3', '31', '312'],
        }}
        onValueChange={onValueChange}
        columnBefor={columnBefor}
        submitRequest={submitRequest}
        submitValuesBefor={submitValuesBefor}
        submitOnDone={submitOnDone}
        submitFixed={true}
        protocol={true}
        protocolRender={(isCheckbox: boolean, fromData: any) => {
          // console.log('===================');
          // console.log(isCheckbox, fromData);
          // console.log('===================');
          return (
            <>
              我已阅读并同意
              <Text className="containe-link" onClick={() => {}}>
                《平台推荐制111度》
              </Text>
            </>
          );
        }}
        countdown={true}
        countdownRender={() => {
          return <>我是信息，必须他阅读完成才能提交</>;
        }}
      />
    </MainContainerCustom>
  );
}
